<template>
    <div class="find">
        <header>
            <span class="glyphicon glyphicon-menu-left"></span>
            <span>发现</span>
        </header>
        <section class="contentA">
            <ul>
                    <li v-for="(v,i) in newAry.slice(0,1)" :key="i"> 
                        <div class="p_text">{{v.title}}</div>
                        <span class="span_text">{{v.subtitle}}</span>
                        <img :src="v.main_pic_hash" alt="">
                    </li>
                    <li>
                        <div class="contentA_1" v-for="(value,index) in newAry.slice(1)" :key="index">
                            <p>{{value.title}}</p>
                            <span class="span_text">{{value.subtitle}}</span>
                            <img :src="value.main_pic_hash" alt="">
                        </div>
                    </li>
            </ul>
        </section>
        <section class="contentB">
            <div class="titleB">
                <p style="font-size: 0.75rem;font-weight:600;margin-top:.625rem">—<span class="glyphicon glyphicon-dashboard" style="color:red"></span> 限时好礼—</p>
                <span style="color:gray ;font-size:0.5rem ">金币换豪礼</span>
            </div>
            <div class="contentB_1">
                <ul>
                    <li v-for="(value,index) in findAry" :key="index">
                        <span class="span_text">{{value.corner_marker}}</span>
                        <img :src="value.image_hash" alt="">
                        <p class="p_text">{{value.title}}</p>
                        <span class="span_text2">{{value.points_required}}金币<sub style="color:gray">￥{{value.original_price}}</sub></span>
                    </li>
                </ul>
            </div>
            <footer>
                <span>查看更多</span>
                <span class="glyphicon glyphicon-menu-right"></span>
            </footer>
        </section>

    </div>
</template>

<script>
export default {
    data(){
        return {
            newAry:[],
            findAry:[]
        }
    },
     created(){
        //  https://mainsite-restapi.ele.me/member/v1/discover?platform=2&block_index=0
          this.$http.get("/mainsite/member/v1/discover?platform=2&block_index=0").then(function(resData){
              var ary=[];
              for(var k in resData.body){
                  ary.push(resData.body[k])
              }
            //   console.log(ary[0]);
              var str="";
            //   https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg
              for(var i=0;i<ary[0].length;i++){
                var s1=ary[0][i].main_pic_hash.slice(0,1);
                var s2=ary[0][i].main_pic_hash.slice(1,3);
                var s3=ary[0][i].main_pic_hash.slice(3);
                str="https://fuss10.elemecdn.com/"+s1+"/"+s2+"/"+s3+".jpeg";
                ary[0][i].main_pic_hash=str;
                this.newAry.push(ary[0][i]);
              }  
          });
          this.suggest();
     },
     methods:{
        //  https://mainsite-restapi.ele.me/member/gifts/suggest
        suggest(){
            this.$http.get("/mainsite/member/gifts/suggest").then(function(resData){
                var str="";
                for(var i=0;i<resData.body.length;i++){
                var s1=resData.body[i].image_hash.slice(0,1);
                var s2=resData.body[i].image_hash.slice(1,3);
                var s3=resData.body[i].image_hash.slice(3);
                str="https://fuss10.elemecdn.com/"+s1+"/"+s2+"/"+s3+".jpeg";
                resData.body[i].image_hash=str;
              }  
                console.log(resData.body);
                this.findAry=resData.body;
            })
        }


     }

}



    
</script>
<style scoped>
*{
    box-sizing: border-box;
}
body,html{
    width: 100%;
    height: 100%;
  
}
p{
    margin: 0px;
    padding: 0px;
}
ul{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none;
}

header{
    width: 100%;
    height: 1.875rem /* 30/16 */;
   background-color: rgb(30, 164, 253);
    text-align: center;
    line-height: 1.875rem /* 30/16 */;
    color: white;
    font-size: .75rem /* 12/16 */;
    position: fixed;
    top: 0px;
    font-weight: 600;
    z-index: 100;
}
header span:nth-child(1){
    margin-left: .3125rem /* 5/16 */;
    position: absolute;
    left: 0px;
    top:.625rem /* 10/16 */;
}
.contentA{
    width: 100%;
    height:7.5rem /* 120/16 */;
    /* border: 1px solid orange; */
    margin-top: 1.875rem /* 30/16 */;
    background-color: white;
    margin-bottom: .5rem /* 8/16 */;
}
.contentA ul{
    width: 100%;
    height: 100%;
}
.contentA li{
    float: left;
    width: 50%;
    height: 100%;
   /* border: 1px solid black; */
   padding: .3125rem /* 5/16 */;
   position: relative;
}
.contentA li:nth-child(1){
    border-right: .03125rem /* 0.5/16 */ solid rgb(230, 227, 227);
}
.contentA li .p_text{
    font-size:.6875rem /* 11/16 */;
    color: orangered;
     margin-top: .5rem /* 8/16 */;
     /* border: 1px solid red; */

}
.contentA li .span_text{
    font-size:.5625rem /* 9/16 */;
    margin: 0px;
    padding: 0px;
    color: gray;
}
.contentA li:nth-child(2){
    padding: 0px;
}

.contentA li:nth-child(1) img{
    width: 3.4375rem /* 55/16 */;
    position: absolute;
    bottom: .3125rem ;
    right: .3125rem ;
}
.contentA_1{
    width: 100%;
    height: 3.75rem /* 60/16 */;
    padding: .5rem /* 8/16 */ ;
    /* border: 1px solid black; */
    position: relative;
}
.contentA_1 p{
    font-size:.6875rem /* 11/16 */;
    /* margin-top: .5rem 8/16; */
    color: rgb(30, 164, 253);
}
.contentA_1 img{
    position: absolute;
    width: 1.875rem /* 30/16 */;
    height: 1.875rem /* 30/16 */;
    top:calc(50% - .9375rem);
    right:.625rem /* 10/16 */;
 
}
.contentA_1:nth-child(1){
    border-bottom: .0625rem  solid rgb(230, 227, 227);
}
.contentB{
    width: 100%;
    background-color: white;
}
.contentB .titleB{
    width: 100%;
    height:3.125rem /* 50/16 */;
    /* border: 1px solid red; */
    text-align: center;
}
.contentB_1{
    width: 100%;
    padding:0 .3125rem /* 5/16 */;
    background-color: white;
}
.contentB_1 li{
    float: left;
    width: 33.33%;
    height:7.5rem /* 120/16 */;
    /* border: 1px solid red; */
    background-color: white;
    position: relative;
}
.contentB_1 li .span_text{
    background: black;
    color: white;
    position: absolute;
    font-size: .5625rem /* 9/16 */;
}
.contentB_1 li img{
    width: 100%;
}
.contentB_1 li .p_text{
    font-size: .5625rem /* 9/16 */;

}
.contentB_1 li .span_text2{
     font-size: .5625rem /* 9/16 */;
    color: red;
}
footer{
    width: 100%;
    background-color: white;
    clear: both;
    height: 1.875rem /* 30/16 */;
    /* border: 1px solid red; */
    line-height: 1.875rem /* 30/16 */;
    text-align: center;
    color:rgb(163, 161, 161);
    font-size: .5625rem /* 9/16 */;
    margin-bottom: 3.75rem /* 60/16 */;
}

    
</style>